<template>
	<view class="mainpadding" v-if="isShow">
		<view class="header" v-if="list.data.length">
			<view class="title">{{titletext}}</view>
			<view class="time">
				<view style="width: 650rpx;">
					<slider activeColor="rgba(0, 0, 0, 1)" backgroundColor="rgba(212, 212, 212, 1)" :block-size="12"
						:max="zbf_time" :value="ybf_time" @change="sliderToPlay" />
				</view>
				<view class="flexbetween">
					<view>{{ybf_time | timeToMinute}}</view>
					<view>{{zbf_time | timeToMinute}}</view>
				</view>
			</view>
			<view class="bottomButton">
				<!-- 播放书顺序-->
				<view class="left">
					<view class="imgBox" @click="randomPlay" v-show="sequence==0">
						<image src="../../static/image/system/random.png" mode=""></image>
					</view>
					<view class="imgBox" @click="wellPlay" v-show="sequence==1">
						<image src="../../static/image/system/well.png" mode=""></image>
					</view>
					<view class="imgBox" @click="dqPlay" v-show="sequence==2">
						<image src="../../static/image/system/dqplay.png" mode=""></image>
					</view>
				</view>
				<!-- 播放暂停 -->
				<view class="center">
					<view @click="playOrPauseAudio" v-if="isPlay">
						<u-icon name="pause-circle" color="rgba(102, 102, 102, 1)" size="32"></u-icon>
					</view>
					<view @click="playOrPauseAudio" v-else>
						<u-icon name="play-circle" color="rgba(102, 102, 102, 1)" size="32"></u-icon>
					</view>
				</view>

				<!-- 倍速 -->
				<view class="right" @click="changeSpeed">
					x{{speedText}}
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="content" v-if="list.data.length">
			<view class="contentHeader">
				<view class="flexleft">
					<view class="leftBg"></view>
					<view class="leftTitle">音频</view>
				</view>
				<view class="right flexleft">
					共{{list.data.length}}集
				</view>
			</view>
			<view class="contentBox">
				<view class="contentItem" v-for="(item,index) in list.data" :key="item.id"
					@click="playAudio(index,item)">
					<view class="contentItemTop">
						<view class="contentItemTopLeft">
							<view class="number">{{index+1}}</view>
							<view class="title">{{item.title}}</view>
						</view>
						<view class="contentItemTopRight">
							{{item.createtime_text}}
						</view>
					</view>
					<view class="contentItemBottom">
						<view class="flexleft" style="margin-right: 30rpx;">
							<u-icon name="play-right" color="rgba(153, 153, 153, 1)" :size="12"></u-icon>
							<view class="title">{{item.read_num_text}}</view>
						</view>
						<view class="flexleft">
							<u-icon name="clock" color="rgba(153, 153, 153, 1)" :size="12"></u-icon>
							<view class="title">{{item.duration | timeToMinute}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="zwtimg flexcenter" v-if="!list.data.length">
			<image src="https://qnwenbo.yuntaiqi.com/uploads/20230527/1d30ad56c2b2a57fdf222904874e20e4.png" mode="">
			</image>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex'
	import util from '@/common/unit.js';
	export default {
		data() {
			return {
				list: {
					data: []
				},
				isShow: false,
				clickNum: 0,
				speedText: "1.0",
				bgAudioManager: null,
				titletext: "", //标题
				zbf_time: 0, //总时长
				ybf_time: 0, //已播放时间
				isPlay: false, //是否播放默认不播放
				currentSrc: "",
				sequence: 0, //0随机播放，1顺序播放,2单曲播放
				playId: "",
				currentIndex: "",
				platform:"",

			}
		},
		filters: {
			// 秒转换分钟00:00:00格式
			timeToMinute(times) {
				let t;
				if (times > -1) {
					let min = Math.floor(times / 60) % 60;
					let sec = times % 60;
					if (min < 10) {
						t = '0' + min + ":";
					} else {
						t = min + ":";
					}
					if (sec < 10) {
						t += "0";
					}
					t += sec.toFixed(2);
				}
				if (t) {
					t = t.substr(0, 5);
				}
				return t;
			}
		},
		watch: {
			clickNum(newVal) {
				if (newVal == 0) {
					this.speedText = "1.0"
					this.setSpeed(1.0)
				} else if (newVal == 1) {
					this.speedText = "1.5"
					this.setSpeed(1.5)
				} else if (newVal == 2) {
					this.speedText = "2.0"
					this.setSpeed(2.0)
				} else if (newVal == 3) {
					this.speedText = "0.5"
					this.setSpeed(0.5)
				}
			}
		},
		onLoad() {
			this.bgAudioManager = wx.getBackgroundAudioManager()
			this.platform = uni.getSystemInfoSync().platform;
			this.getList()
		},
		methods: {
			getList() { //音频列表
				let _this = this;
				httpRequest.request('/api/Qhjdb/index', 'POST', {}).then(res => {
					if (res.code == 1) {
						_this.list.data = res.data

						if (res.data.length) {
							this.currentIndex = 0
							this.titletext = res.data[0].title
							this.playId = res.data[0].id
							this.bgAudioManager.title = res.data[0].title;
							this.bgAudioManager.singer = '暂无';
							this.bgAudioManager.coverImgUrl =
								'https://web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
							_this.list.data.forEach((item, index) => { //获取每个数据的播放时长
								// 苹果
								if (_this.platform === "ios") {
									let innerAudioContext = uni.createInnerAudioContext()
									innerAudioContext.src = item.yp_file_text
									innerAudioContext.onCanplay(() => { //
										let intervalID = setInterval(() => {
											if (innerAudioContext.duration !== 0) {
												clearInterval(intervalID);
												innerAudioContext.destroy()
												if (index == 0) {
													this.currentSrc = item.yp_file_text
													this.zbf_time = innerAudioContext
														.duration //获取总时长
												}
												_this.$set(item, "duration",
													innerAudioContext
													.duration)
											}
										}, 100);
									})
								} else {
									// 安卓
									let innerAudioContext = uni.createInnerAudioContext()
									innerAudioContext.src = item.yp_file_text
									innerAudioContext.play();
									innerAudioContext.pause()
									innerAudioContext.onCanplay(() => { //
										let intervalID = setInterval(() => {
											if (innerAudioContext.duration !== 0) {
												clearInterval(intervalID);
												if (index == 0) {
													this.currentSrc = item.yp_file_text
													this.zbf_time = innerAudioContext
														.duration //获取总时长
												}
												_this.$set(item, "duration",
													innerAudioContext
													.duration)
											}
											innerAudioContext.destroy()
										}, 100);
									})
								}
							})
						}

						_this.isShow = true
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			addPlayCount(id) { //增加播放量
				let _this = this;
				httpRequest.request('/api/Qhjdb/addReadNum', 'POST', {
					id
				}).then(res => {
					if (res.code == 1) {} else {
						httpRequest.toast(res.msg);
					}
				})
			},

			sliderToPlay(t) {
				this.ybf_time = t.detail.value
				this.bgAudioManager.seek(this.ybf_time)

				console.log(this.bgAudioManager, "tuoxing");
			},
			randomPlay() { //随机播放
				this.sequence = 1
			},
			wellPlay() { //顺序播放
				this.sequence = 2
			},
			dqPlay() { //顺序播放
				this.sequence = 0
			},
			// 倍速播放
			setSpeed(n) {
				// this.bgAudioManager.stop()
				if(this.isPlay){
					if(this.platform!=="ios"){
						this.bgAudioManager.title = this.titletext;
						this.bgAudioManager.singer = '文博';
						this.bgAudioManager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
						this.bgAudioManager.src = this.currentSrc
						this.bgAudioManager.playbackRate = Number(n).toFixed(1)
						setTimeout(() => {
							this.bgAudioManager.seek(this.ybf_time)
							this.ybf_time = this.bgAudioManager.currentTime
						}, 100)
					}else{
						this.bgAudioManager.title = this.titletext;
						this.bgAudioManager.singer = '文博';
						this.bgAudioManager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
						this.bgAudioManager.src = this.currentSrc
						this.bgAudioManager.playbackRate = Number(n).toFixed(1)
					}
				}
				
				

			},
			playOrPauseAudio() {
				let _this = this
				if (!this.bgAudioManager.src) {
					this.bgAudioManager.seek(this.ybf_time)
					this.bgAudioManager.src = this.currentSrc
					this.bgAudioManager.playbackRate = this.speedText
				}
				if (this.isPlay) {
					this.isPlay = false
					_this.bgAudioManager.pause()
				} else {
					this.isPlay = true
					_this.bgAudioManager.play()
					this.watchMusic()
				}
				this.addPlayCount(this.playId) //增加播放量
			},
			playAudio(index, item) { //点击音频播放音频
				console.log(item, "999");
				this.currentIndex = index
				this.playId = item.id
				this.bgAudioManager.stop()
				this.titletext = item.title
				this.currentSrc = item.yp_file_text
				this.zbf_time = item.duration
				this.bgAudioManager.title = item.title;
				this.bgAudioManager.playbackRate = Number(this.speedText).toFixed(1)
				this.bgAudioManager.singer = '文博';
				this.bgAudioManager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
				this.bgAudioManager.src = item.yp_file_text
				this.isPlay = true
				this.watchMusic()
				this.addPlayCount(this.playId) //增加播放量
			},
			// 监听音乐变化
			watchMusic() {
				let _this = this
				this.bgAudioManager.onTimeUpdate(() => {
					this.ybf_time = _this.bgAudioManager.currentTime
					console.log(_this.bgAudioManager, "更新了");
				})
				this.bgAudioManager.onEnded(() => {
					console.log("结束");
					let random1 = 0
					let indexvalue = Number(this.currentIndex) + 1
					if (this.sequence == 0) {//随机播放
						random1 = Math.floor(Math.random() * (3 - 0) + 0);
					} else if(this.sequence == 1) {//顺序播放
						if (indexvalue != this.list.data.length) {
							random1 = indexvalue
						} else {
							this.isPlay = false
							return false
						}
					}else{//单曲循环
						this.bgAudioManager.title = this.titletext
						this.bgAudioManager.playbackRate = this.speedText
						this.bgAudioManager.singer = '文博';
						this.bgAudioManager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
						this.bgAudioManager.src = this.currentSrc
						return false
					}
					this.currentIndex = random1
					this.currentSrc = this.list.data[random1].yp_file_text
					this.titletext = this.list.data[random1].title
					this.zbf_time = this.list.data[random1].duration
					this.playId = this.list.data[random1].id
					this.bgAudioManager.title = this.titletext
					this.bgAudioManager.playbackRate = this.speedText
					this.bgAudioManager.singer = '文博';
					this.bgAudioManager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
					this.bgAudioManager.src = this.currentSrc
				})
			},
			changeSpeed() { //改变倍速
				if (this.clickNum == 3) {
					this.clickNum = 0
					return
				}
				this.clickNum++
			}
		},
	}
</script>

<style lang="scss" scoped>
	slider {
		// width: 100%;
		margin: 0 10rpx;
	}

	.header {
		padding: 30rpx;
		background: #F2F2F2;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.title {
			font-size: 32rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
		}

		.time {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-top: 20rpx;
		}

	}

	.bottomButton {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;

		.imgBox {
			width: 40rpx;
			height: 40rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			width: 64rpx;
			height: 39rpx;
			line-height: 39rpx;
			// padding: 5rpx;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			border: 1rpx solid #000000;
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			text-align: center;
		}
	}

	.content {
		margin-top: 60rpx;
		padding: 30rpx;
	}

	.contentHeader {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.leftBg {
			width: 9rpx;
			height: 30rpx;
			background: #DCB490;
			border-radius: 33rpx 33rpx 33rpx 33rpx;
			margin-right: 20rpx;
		}

		.leftTitle {
			font-size: 32rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
		}

		.right {
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #DCB490;
		}
	}

	.contentItem {
		margin-top: 60rpx;
	}

	.contentItemTop {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contentItemTopLeft {
		display: flex;
		align-items: center;

		.number {
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-right: 30rpx;
		}

		.title {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}

	.contentItemTopRight {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.contentItemBottom {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		margin-left: 40rpx;

		.title {
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-left: 5rpx;
			// margin-bottom: 8rpx;
			margin-top: -3rpx;
		}
	}
</style>